<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>语音输入修复测试</title>
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            margin: 0;
            padding: 20px;
            background: #f5f5f5;
        }
        .container {
            max-width: 600px;
            margin: 0 auto;
            background: white;
            border-radius: 12px;
            padding: 24px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
        .status {
            padding: 12px;
            border-radius: 8px;
            margin: 12px 0;
            font-weight: 500;
        }
        .success { background: #d1fae5; color: #065f46; }
        .error { background: #fee2e2; color: #991b1b; }
        .info { background: #dbeafe; color: #1e40af; }
        .warning { background: #fef3c7; color: #92400e; }
        .log {
            background: #f3f4f6;
            border: 1px solid #e5e7eb;
            border-radius: 8px;
            padding: 12px;
            margin: 12px 0;
            font-family: 'Courier New', monospace;
            font-size: 12px;
            max-height: 200px;
            overflow-y: auto;
        }
        button {
            background: #3b82f6;
            color: white;
            border: none;
            padding: 8px 16px;
            border-radius: 6px;
            cursor: pointer;
            margin: 4px;
        }
        button:hover { background: #2563eb; }
        button:disabled { background: #9ca3af; cursor: not-allowed; }
    </style>
</head>
<body>
    <div class="container">
        <h1>🎤 语音输入修复测试</h1>
        
        <div class="status info">
            <strong>测试目的：</strong>验证VoiceInputPage的React hooks错误修复
        </div>

        <div class="status success">
            <strong>✅ 修复内容：</strong>
            <ul>
                <li>移除了条件渲染中的useVoiceStore()调用</li>
                <li>将audioUrl和clearHistory正确解构到组件顶层</li>
                <li>确保所有hooks都在组件顶层调用</li>
            </ul>
        </div>

        <div class="status warning">
            <strong>⚠️ 问题原因：</strong>
            <p>React hooks必须在组件顶层调用，不能在条件语句、循环或嵌套函数中调用。之前的代码在条件渲染中使用了useVoiceStore()，导致hooks调用顺序发生变化。</p>
        </div>

        <div class="status info">
            <strong>🔧 修复方法：</strong>
            <ol>
                <li>在组件顶层解构所有需要的store属性</li>
                <li>移除条件渲染中的hooks调用</li>
                <li>使用解构的属性替代直接调用</li>
            </ol>
        </div>

        <div>
            <h3>测试步骤：</h3>
            <ol>
                <li>打开手机端应用</li>
                <li>进入语音输入页面</li>
                <li>检查是否还有React hooks错误</li>
                <li>尝试语音输入功能</li>
                <li>检查文本显示是否正常</li>
            </ol>
        </div>

        <div>
            <h3>预期结果：</h3>
            <ul>
                <li>✅ 不再出现"Rendered more hooks than during the previous render"错误</li>
                <li>✅ 语音识别结果能正常显示</li>
                <li>✅ 播放录音按钮正常工作</li>
                <li>✅ 清空历史记录功能正常</li>
            </ul>
        </div>

        <div class="log" id="log">
            <strong>调试日志：</strong>
            <div id="logContent"></div>
        </div>

        <div style="text-align: center; margin-top: 20px;">
            <button onclick="window.location.href='/'">返回主页</button>
            <button onclick="window.location.reload()">刷新页面</button>
        </div>
    </div>

    <script>
        // 添加一些调试信息
        const log = document.getElementById('logContent');
        const addLog = (message) => {
            const time = new Date().toLocaleTimeString();
            log.innerHTML += `[${time}] ${message}\n`;
            log.scrollTop = log.scrollHeight;
        };

        addLog('页面加载完成');
        addLog('VoiceInputPage hooks修复已应用');
        addLog('请测试手机端语音输入功能');

        // 监听页面错误
        window.addEventListener('error', (event) => {
            addLog(`❌ 错误: ${event.message}`);
        });

        // 监听未处理的Promise拒绝
        window.addEventListener('unhandledrejection', (event) => {
            addLog(`❌ Promise错误: ${event.reason}`);
        });
    </script>
</body>
</html> 